<script setup lang="ts">
import { cancelOrder, oneClickRefund } from '@fl/api/order/base'

const props = defineProps({
    handleClose: {
        required: true,
        type: Function,
    },
    orderDetailsForm: {
        required: true,
        type: Object,
    },
    refundMethod: {
        type: String,
    },
})

const id = ref<string | undefined>('')
const deposit = ref<string>('')
const formRef = ref()
const textRow = ref<number>(4)

const data = reactive<any>({
    form: {
    },
    rules: {
        reasonForCancellation: [
            { message: '取消原因不能为空', required: true, trigger: 'blur' },
        ],
        refundAmount: [
            { message: '退款金额不能为空', required: true, trigger: 'blur' },
        ],
    },
})
const { form, rules } = toRefs(data)

// 取消按钮
function handleCancle() {
    props.handleClose()
}

// 确定按钮
function handleConfirm() {
    formRef.value.validate((valid) => {
        if (valid) {
            const formData = { ...form.value }
            formData.id = id.value
            if (formData.refundMethod === '1') {
                oneClickRefund(formData).then((_res) => {
                    ElMessage.success('取消成功')
                    props.handleClose()
                })
            }
            else if (formData.refundMethod === '2') {
                cancelOrder(formData).then((_res) => {
                    ElMessage.success('取消成功')
                    props.handleClose()
                })
            }
        }
    })
}

onMounted(() => {
    id.value = props.orderDetailsForm.id
    deposit.value = props.orderDetailsForm.deposit
    form.value.refundAmount = props.orderDetailsForm.deposit
    form.value.refundMethod = props.refundMethod
})
</script>

<template>
    <div class="app-container">
        <ElForm ref="formRef"
                :model="form"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
                style="background-color: white;margin: 0 auto;width: 100%;padding: 20px;"
        >
            <el-form-item label="取消原因:"
                          prop="reasonForCancellation"
            >
                <el-input v-model="form.reasonForCancellation"
                          type="textarea"
                          :rows="textRow"
                          placeholder=""
                />

                <el-text>会记录在给客户的留言中</el-text>
            </el-form-item>

            <el-form-item label="订金订单金额:"
                          prop="deposit"
            >
                <el-text>¥{{ deposit }}</el-text>
            </el-form-item>

            <el-form-item label="确认退款金额:"
                          prop="refundAmount"
            >
                <el-input v-model="form.refundAmount"
                          placeholder=""
                />
            </el-form-item>
            <!-- <el-form-item label="退款方式:" prop="refundMethod">
				<el-radio-group v-model="form.refundMethod">
					<el-radio v-for="item in order_tkfs" :label="item.value" :value="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item> -->
        </ElForm>

        <el-row>
            <div class="dialog-footer">
                <el-button @click="handleCancle">
                    取消
                </el-button>

                <el-button type="primary"
                           @click="handleConfirm"
                >
                    确定
                </el-button>
            </div>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
    background-color: #e4e4e4 !important;
}

.app-container {
    padding: 0px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
</style>
